import React, { useState } from "react";
import { Button, Modal, Form, Radio, Input } from "antd";
import axios from "axios";
import {connect} from "react-redux"
import { setVisible } from "../../redux/actions/studentAction";
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

export default connect(({studentReducer}) => ({
    visible:studentReducer.visible,
    student:studentReducer.student
}))(function(props){
    const [form] = Form.useForm();
    const handleOk = () => {
        // let { getFieldsValue } = this.props.form;
        // console.log(getFieldsValue());
        axios({
            method: "put",
            url: "/students/" + props.student._id,
            data: form.getFieldsValue()
        }).then(() => {
            props.show();
            // props.closeUpdate();
        });
    };
    const handleCancel = () => {
        props.dispatch(setVisible(false));
    };

    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 4 }
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 20 }
        }
    };
    form.setFieldsValue(props.student);
    return (
        <Modal
            title="修改学生"
            visible={props.visible}
            onOk={handleOk}
            onCancel={handleCancel}
        >
            <Form form={form}  > 
                <FormItem {...formItemLayout} hasFeedback label="姓名" name="name">
                    <Input />
                </FormItem>
                <FormItem {...formItemLayout} label="年龄" name="age">
                    <Input />
                </FormItem>
                <FormItem {...formItemLayout} label="性别" name="gender">
                    <RadioGroup>
                            <Radio value="男">男</Radio>
                            <Radio value="女">女</Radio>
                        </RadioGroup>
                
                </FormItem>
            </Form>
        </Modal>
    )
})